<template>
  <view :scroll-x="true" :show-scrollbar="false" class="type_div">
    <ul>
      <li
        :class="index == active ? 'active' : ''"
        v-for="(item, index) in data"
        :key="index"
        @click="changeVal(index)"
      >
        {{ item }}
      </li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    data: {
      default: [],
    },
    active: {
      default: 0,
    },
    change: {
      type: Function,
      default: (index) => {},
    },
  },
  methods: {
    changeVal(index) {
      this.$emit("update:active", index);
      this.change(index);
    },
  },
};
</script>

<style scoped>
* {
  font-size: 30rpx;
}
.type_div {
  width: 750rpx;
  height: 80rpx;
  white-space: nowrap;
  border-bottom: solid 2rpx;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.type_div li {
  height: 76rpx;
  display: table-cell;
  vertical-align: middle;
  padding: 0 40rpx;
  line-height: 76rpx;
}
.active {
  color: blue;
  border-bottom: blue solid 10rpx;
}
</style>